<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="contestPath" value="<%=request.getContextPath()%>"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生信息</title>
</head>
<body>

	<script type="text/javascript">
		$(function(){
			$(".edit-subject").click(function(){
				var userId = $(this).parent().siblings().eq(1).text();
				$.ajax({
					type: "POST",
					url: "${contestPath}/teacher/getAllSubject",
					data: {
						userId:userId
					},
					dataType: "json",
					success: function(data){
						var htmlString = '';
						var selectedSubject = data.selectedSubject;
						var testSubject = data.testSubject;
						for(var i = 0; i < data.allSubject.length; i++){
							var subject = data.allSubject[i];
							var checked = checkSelectedSubject(selectedSubject, subject.subId) ? ' checked="checked" ' : '';
							var test = checkTestSubject(testSubject, subject.subId) ? ' (已参考) ' : '';
							var disabled ='';
							if(test == ' (已参考) '){
								disabled = "disabled";
							}
							htmlString += '<div class="checkbox">';
							htmlString += '		<label>';
							htmlString += '			<input name="studentSubjects" class="ace ace-checkbox-2" type="checkbox" value="'
													+ subject.subId + '" ' + checked + disabled + ' />';
							htmlString += '			<span class="lbl">' + subject.name + test + '</span>';
							htmlString += '		</label>';
							htmlString += '</div>';
						}
						$('#studentSubjectContent').html(htmlString);
						$('#studentId').val(userId);
					}
				});
				
				$('#editSubjectModal').modal('show');
			});

			var checkSelectedSubject = function(selectedSubject, subId){
				var falg = false;
				$.each(selectedSubject, function(index, item){
					if(item == subId){
						falg = true;
					}
				});
				return falg;
			};

			var checkTestSubject = function(testSubject, subId){
				var falg = false;
				$.each(testSubject, function(index, item){
					if(item == subId){
						falg = true;
					}
				});
				return falg;
			};

			$('#editSubjectUpdateBtn').click(function(){
				//if($('#addTestForm').valid()){
				var studentSubjects = [];
				var l = $('input[name="studentSubjects"]:checked').length;
				if(l > 0){
					for(var i = 0; i < l; i++){
						studentSubjects[i] = $($('input[name="studentSubjects"]:checked')[i]).val();
					}
				}else{
					subjectStudents[0] = '';
				}
				
				$.ajax({
					type: 'POST',
					url: '${contestPath}/teacher/saveStudentSubject',
					data: {
						studentSubjects: studentSubjects,
						userId:$('#studentId').val()
					},
					dataType: "json",
					success: function(data){
						if(data.success){
							alert('成功！');
							window.location.reload();
						}else{
							alert('失败！');
						}
					}
				});
				//}
			});
		})
	</script>
	
	<!-- 管理参考科目-模态框（Modal） -->
	<div class="modal fade" id="editSubjectModal" tabindex="-1" role="dialog" aria-labelledby="editSubjectModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content" style="width:400px;margin:auto">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="editSubjectModalLabel">管理学生科目</h4>
	            </div>
	            <div class="modal-body">
	            	<input type="hidden" id="studentId" />
	            	<div id="studentSubjectContent" class="control-group">
	            	</div>
				</div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button id="editSubjectUpdateBtn" type="button" class="btn btn-primary">保存</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
	
	<div class="page-content-area">
			<div class="row">
				<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
					<table id="testListTable" class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th width=50 class="center">
									<label class="position-relative">
										<input type="checkbox" class="ace" />
										<span class="lbl"></span>
									</label>
								</th>
							    <th width=150>ID</th>
							    <th width=150>姓名</th>
							    <th width=200>科目</th>
							    <th width=150>操作</th>
                             </tr>
						</thead>

						<tbody>
                        <c:forEach items="${studentList }" var="student">
                            <tr>
                                <td class="center">
                                    <label class="position-relative">
                                        <input type="checkbox" class="ace" />
                                        <span class="lbl"></span>
                                    </label>
                                </td>
                                <td>${student.id }</td>
                                <td>${student.name }</td>
                                <td class="subject">
                                <select style="width: 200px;">
                                <c:forEach items="${student.subjectList }" var="subject">
                                	<option value="${subject.subId }">${subject.name }</option>
                                </c:forEach>
                                </select>
                                </td>
								<td>
									<button title="管理科目" class="btn btn-xs btn-info edit-subject">
										<i class="ace-icon fa fa-pencil bigger-120"></i>
									</button>
								</td>
							</tr>
						</c:forEach>
						</tbody>
					</table>
					<div class="hr hr-18 dotted hr-double"></div>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content-area -->
	
</body>
</html>